import { Form, Table, Button, Space, message, Tag } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import type {
  TableProps,
  FormProps,
  FormListFieldData,
  FormInstance
} from 'antd';
import type { ReactNode } from 'react';
import { useCallback, useEffect, useRef, forwardRef } from 'react';
import { FormTableItem } from '../FormTableType';

// 定义单条数据的基础类型
// 定义列配置类型
export interface FormTableColumn<T extends FormTableItem> extends Omit<NonNullable<TableProps<T>['columns']>[number], 'render'> {
  // 自定义表单控件渲染
  renderFormItem: (
    index: number,
    field: FormListFieldData,
    form: FormInstance<{ items: T[] }>
  ) => ReactNode;
}

// 组件属性类型
export interface FormTableProps<T extends FormTableItem> {
  // 初始数据
  initialData: DepartmentItem[];
  // 列配置
  columns: FormTableColumn<T>[];  // 修正为明确的列类型数组
  // 表单提交回调
  onFinish: (values: T[]) => void;
  // 表单额外属性
  formProps?: Omit<FormProps<{ items: T[] }>, 'onFinish' | 'initialValues'>;  // 明确表单值类型
  // 表格额外属性
  tableProps?: Omit<TableProps<T>, 'columns' | 'dataSource' | 'pagination'>;
  // 提交按钮文本
  submitText?: string;
  className?: string;
  // 是否显示重置按钮
  showReset?: boolean;
  // 是否显示添加按钮
  showAdd?: boolean;
  // // 操作列标题
  operationTitle?: string;
  // 操作列宽度
  operationWidth?: number;
}
// 导出FormInstance类型方便外部使用
export type { FormInstance };
// 用于暴露ref方法的类型
export interface FormTableRef<T extends FormTableItem> {
  getFormInstance: () => FormInstance<{ items: T[] }>;
  getTableData: () => T[];
  // 校验表单
  validateFields: () => Promise<boolean>;
}
// 表单列表&表格实现组件实现
function FormTableComponent<T extends FormTableItem>(
  props: FormTableProps<T>,
  ref: React.Ref<FormTableRef<T>>
) {

  // 明确指定form的类型
  const [form] = Form.useForm<{ items: T[] }>();
  // 处理表单提交
  const handleFinish: FormProps<{ items: T[] }>['onFinish'] = (values) => {
    props.onFinish(values.items);
  };
  // 校验表单
    const funvalidateFields = async (): Promise<boolean> => {
    try {
      // 执行表单校验
      await form.validateFields();
      // 校验成功，返回true
      return true;
    } catch (error) {
      // 校验失败，返回false
      return false;
    }
  };
  // 暴露给ref的方法集
  const formTableRef = useRef<FormTableRef<T>>({
    getFormInstance: () => form,
    getTableData: () => form.getFieldValue('items') || ([] as T[]),
    validateFields: funvalidateFields

  });
  // 同步外部数据到表单
  useEffect(() => {
    form.setFieldValue('items', props.initialData);
  }, [props.initialData, form]);
  // 将ref方法绑定到外部传入的ref
  useEffect(() => {
    if (ref) {
      if (typeof ref === 'function') {
        ref(formTableRef.current);
      } else {
        ref.current = formTableRef.current;
      }
    }
  }, [ref]);
  // 重置表单
  const handleReset = useCallback(() => {
    form.resetFields();
    message.info('已重置表格数据');
  }, [form]);
  // 生成表格列配置（包含操作列）
  // 参数1：表单列表字段数据数组（用于关联表单与表格行）
  // 参数2：包含删除行方法的对象（用于操作列的删除功能）
  const getColumns = (
    fields: FormListFieldData[],
    { remove }: { remove: (index: number) => void }
  ) => {
    // 定义渲染列的类型：继承自FormTableColumn但重写render方法，并保留renderFormItem
    // 目的是将原表单控件渲染方法(renderFormItem)与表格展示渲染方法(render)区分开
    interface RenderColumn extends Omit<FormTableColumn<T>, 'renderFormItem'> {
      render: (text: unknown, record: T, index: number) => ReactNode; // 表格单元格渲染方法
      renderFormItem: FormTableColumn<T>['renderFormItem']; // 保留原表单控件渲染方法
    }
    // 将用户配置的列转换为表格所需的渲染列
    // 遍历每一列配置，重写render方法，使其调用用户定义的表单控件渲染方法
    const renderColumns: RenderColumn[] = props.columns.map((column) => ({
      ...column, // 继承原有列配置（如title、key、width等）
      // 重写表格的render方法：通过索引关联当前行的表单字段数据，渲染表单控件
      render: (_, __, index) => column.renderFormItem(index, fields[index], form)
    }));

    // 向列配置中添加操作列（用于删除行）
    renderColumns.push({
      title: props.operationTitle || '操作', // 操作列标题（默认"操作"）
      key: 'operation', // 列唯一标识
      width: props.operationWidth, // 操作列宽度（默认100）
      // 渲染删除按钮：点击时调用remove方法删除当前行
      render: (_, __: T, index: number) => (
        <Tag onClick={() => remove(index)} color="red">删除</Tag>
      ),
      // 操作列无需表单控件，所以renderFormItem返回null
      renderFormItem: () => null,
    });

    // 返回最终的表格列配置
    return renderColumns;
  };

  return (
    <Form
      form={form}
      {...props.formProps}
      initialValues={{ items: props.initialData }}
      onFinish={handleFinish}
      className={props.className}
      layout={props.formProps?.layout || 'vertical'}
    >
      <Form.List name="items">
        {(fields, { add, remove }) => (
          <>
            {/* 操作按钮区 */}
            <Space style={{ marginBottom: 16 }}>
              {props.showReset && (
                <Button onClick={handleReset}>
                  重置
                </Button>
              )}

              {props.showAdd && (
                <Button
                  type="dashed"
                  onClick={() => add()}
                  icon={<PlusOutlined />}
                >
                  添加行
                </Button>
              )}
            </Space>

            {/* 表格 */}
            <Table<T>
              {...props.tableProps}
              bordered={props.tableProps?.bordered ?? true}
              dataSource={fields.map((field, index) => ({
                ...form.getFieldValue(['items', field.name]) as T,
                key: field.key,
                index,
              }))}
              columns={getColumns(fields, { remove })}
              pagination={false}
              scroll={{ x: 'max-content' }}
            />
          </>
        )}
      </Form.List>
    </Form>
  );
};

// 2. 用 forwardRef 包装组件，简化泛型写法
const FormTable = forwardRef(FormTableComponent) as <T extends FormTableItem>(
  props: FormTableProps<T> & { ref?: React.Ref<FormTableRef<T>> }
) => React.ReactElement;



export default FormTable;